@include b(odoo-chart) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  @include e(header) {
    display: flex;
    flex-shrink: 0;
    gap:getCssVar(spacing, tight);
    align-items: center;
    margin: getCssVar(spacing, tight);
  }
  @include e(btn-group) {
    display: flex;
    gap:getCssVar(spacing, super, tight);
    align-items: center;
    @include m(btn) {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 32px;
      cursor: pointer;
      background-color: getCssVar(color, fill, 1);

      &:hover {
        background-color: getCssVar(color, fill, 2);
      }

      &:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;

      }

      &:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }

      @include when(selected) {
        background-color: getCssVar(color, primary, light, default);
        border: 1px solid getCssVar(color, primary);
      }
      
    }
  }
  @include e(survey) {
    @include m(icon) {
      margin-left: getCssVar(spacing, tight);
    }
    @include m(item) {
      position: relative;
      
      @include when(selected) {
        &::before {
          position: absolute;
          inset: 0 auto auto;
          font: .7em / 1em FontAwesome;
          color: getCssVar(color, primary);
          content: "\f00c";
          transform: translate(-1.5em, 90%);
        }
      }
    }
    @include m(popper) {
      &.el-popper.el-dropdown__popper {
        .el-scrollbar .el-dropdown__list .el-dropdown-menu__item {
          min-width: 80px;
          padding: 3px 20px;
          line-height: 21px;
        }
      }
    }
  }
  @include e('chart') {
    flex-grow: 1;
    width: 100%;
    height: calc(100% - 48px);
  }
}
